<template>
  <el-menu class="navbar" mode="horizontal" background-color="#545c64">
    <div class="cell-container">
      <div class="cell-item">&nbsp;</div>
      <div class="cell-item">
        <span>&nbsp;</span>
      </div>
      <div class="cell-item">&nbsp;</div>
    </div>
  </el-menu>
</template>

<script>
export default {
  name: 'ToolBar',
  props: {
    latlon: {
      type: String,
      default: '113.2244,23.0123'
    }
  }
}
</script>

<style scoped>
.navbar {
  height: 32px;
  line-height: 32px;
  border-radius: 0px !important;
  border: 0px;
}
.cell-container {
  display: table;
  margin: 0 auto;
}

.cell-item {
  /* By setting flex-grow to 1, the main content will take up
   all of the remaining space on the page.
   The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}
</style>
